<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<style>
    div {
        height: 300px;
        background-color: antiquewhite;
        width: 300px;
        text-align: center;
        margin: 20px;
    }

    span {
        font-size: 24px;
        font-weight: bolder;
    }

    /*----------------------------------------------------*/

    .demo1 {
        line-height: 300px;
    }

    /*----------------------------------------------------*/

    .demo2 span {
        vertical-align: middle;
    }

    .demo2::after {
        content: '';
        vertical-align: middle;
        display: inline-block;
        height: 300px;
    }

    /*----------------------------------------------------*/

    .demo3 {
        display: -webkit-box;
        display: -moz-box;
        -webkit-box-orient:vertical;
        -moz-box-orient:vertical;
        -webkit-box-pack:center;
        -moz-box-pack:center;

        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>

<div class="demo1">
    <span>1</span>
</div>


<div class="demo2">
    <span>2</span>
</div>


<div class="demo3">
    <span>3</span>
</div>

</body>
</html>